<template>
  <div class="shang">
    <!-- 头部 -->
    <header>
      <a href="javascript:history.go(-1)">
        <span class="jian"></span>
      </a>
      <span>商品详情</span>
      <router-link to="/gou">
        <span class="iconfont icon-jiarugouwuche gou_tb"></span>
      </router-link>
    </header>
    <!-- 链接 -->
    <div class="bao" v-show="show">
      <a @click="flag0 = 0" title="0">
        <span :class="{ bei: flag0 == 0 }">宝贝</span>
      </a>
      <a href="#pingjia" @click="flag0 = 1" title="1">
        <span @click="btn1" :class="{ bei: flag0 == 1 }">评价</span>
      </a>
      <a href="#xiang_ping" @click="flag0 = 2" title="2">
        <span @click="btn" :class="{ bei: flag0 == 2 }">详情</span>
      </a>
      <a href="#" @click="flag0 = 3" title="3">
        <span :class="{ bei: flag0 == 3 }">推荐</span>
      </a>
    </div>

    <!-- 轮播 -->
    <!-- 轮播图 -->
    <div id="banner">
      <ul id="img">
        <li v-for="(val, key) in lunBo" :key="key">
          <img :src="val.lunImg" title="" alt="" />
        </li>
      </ul>
      <!--圆点-->
      <div id="pageNav">
        <a href="" title="1" class=""></a>
        <a href="" title="2"></a>
        <a href="" title="3"></a>
      </div>
    </div>

    <!-- 价格  -->
    <nav>
      <!-- 钱 -->
      <div class="qian">
        <span class="huo">活动价：</span>
        <span class="h_jia">{{ h_jia }}</span>
        <span class="y_jia">￥1999-￥2000</span>
      </div>
      <!-- 文字 -->
      <div class="wen">
        <div>
          <span class="fen">{{ fen_title }} </span>
          <router-link to="">
            <span class="xiang">
              <i class="iconfont icon-iconfontzhizuobiaozhun20"></i>
              <span>分享</span>
            </span>
          </router-link>
          <div style="clear: both"></div>
        </div>
        <div style="margin-top: 6px">
          <p class="xin">
            新年狂欢节，单品1件9.5折，2件9折，3件8.5折，满1999包安装；套餐最高立减900+包安装，质保5年，采用高亮led光源，易更换！
          </p>
        </div>
      </div>
      <!-- 活动 -->
      <div class="huo_dong">
        <span>活动：</span>
        <span class="xin">[最新优惠券]</span>
        <router-link to="">
          <span class="ling">立即领取</span>
        </router-link>
      </div>
      <!-- 选商品 -->
      <div class="xuan">
        <router-link to="">
          <span>选择商品规格</span>
          <span class="jian_tou"></span>
        </router-link>
      </div>
    </nav>

    <!-- 交易 -->
    <div class="jiao_yi">
      <span>交易记录</span>
      <span class="liulan">
        <span>浏览</span>
        <span>5+</span>
      </span>
      <span class="goumai">
        <span>购买</span>
        <span>0+</span>
      </span>
    </div>

    <!-- 提示信息 -->
    <div class="ti">
      <span>继续拖动，查看商品信息</span>
    </div>

    <!-- 信息详情 -->
    <main>
      <!-- 详情 -->
      <div class="two_btn">
        <div @click="btn" :class="{ xq: msg }">评价</div>
        <div @click="btn1" :class="{ xq: msg1 }">详情</div>
      </div>
      <div class="xiang_qing" v-show="msg" id="xiang_ping">
        <img :src="xq_tu" alt="" />
      </div>
      <!-- 评论 -->
      <div class="ping_len" v-show="msg1" id="pingjia">
        <button type="button" class="btn btn-warning">全部</button>
        <button class="ping">
          <span>好评</span>
          <span>
            <span>(</span>
            <span>0</span>
            <span>)</span>
          </span>
        </button>
        <button class="ping">
          <span>中评</span>
          <span>
            <span>(</span>
            <span>0</span>
            <span>)</span>
          </span>
        </button>
        <button class="ping">
          <span>差评</span>
          <span>
            <span>(</span>
            <span>0</span>
            <span>)</span>
          </span>
        </button>
        <button class="ping">
          <span>有图</span>
          <span>
            <span>(</span>
            <span>0</span>
            <span>)</span>
          </span>
        </button>
      </div>
    </main>

    <div id="ti" :class="{ op: op }">
      <p class="dui_hao"></p>
      <p>添加成功,在购物车等亲哟~</p>
    </div>
    <div id="ti" :class="{ op: op1 }">
      <p class="wenti">?</p>
      <p>亲还没选择款式哟~</p>
    </div>
    <!-- 底部信息 -->
    <footer>
      <div>
        <span>店铺信息</span>
        <div class="xian"></div>
      </div>
    </footer>

    <!-- 底部购买功能 -->
    <div class="dibu">
      <div class="left">
        <div>
          <p class="iconfont icon-dianpu tu"></p>
          <p class="dianpu">店铺</p>
        </div>
        <div>
          <p class="iconfont icon-kefu tu tu2"></p>
          <p class="dianpu">客服</p>
        </div>
        <div :class="{ yanse }" @click="yanse = !yanse">
          <p class="iconfont icon-shoucang tu tu3"></p>
          <p class="dianpu">收藏</p>
        </div>
      </div>
      <!-- 右边按钮 -->
      <div class="right">
        <div class="jia" @click="gou">加入购物车</div>
        <div class="gou_mai" @click="gou1">立即购买</div>
      </div>
    </div>

    <div class="zhe" v-show="!f1" @click="gou"></div>
    <!-- 购买的商品 -->
    <div :class="{ gmsp: !f1, la: f1 }">
      <div class="gou_top">
        <div class="tu">
          <img :src="xing_ing" alt="" />
        </div>
        <div class="wen">
          <p class="title">{{ title }}</p>
          <p class="xing">{{ xing }}</p>
        </div>
        <div @click="gou" class="ca">X</div>
      </div>
      <!-- 选择款式 -->
      <div class="kuan">
        <p>选择款式</p>
        <div>
          <button @click="kuan1" :class="{ kuan_yanse: flag === 0 }">
            {{ kuanS1 }}
          </button>

          <button @click="kuan2" :class="{ kuan_yanse: flag === 1 }">
            {{ kuanS2 }}
          </button>

          <button @click="kuan3" :class="{ kuan_yanse: flag === 2 }">
            {{ kuanS3 }}
          </button>
        </div>
      </div>
      <!-- 选择款式 -->
      <div class="kuan">
        <p class="left">
          <span>购买数量</span>
          <span class="hui">库存2700个</span>
        </p>
        <p class="btn">
          <button @click="sub">-</button>
          <button class="shu">{{ shuLiang }}</button>
          <button @click="add">+</button>
        </p>
      </div>
      <!-- 确定按钮 -->
      <button class="que_ding" @click="addContent" v-show="!que2">确定</button>

      <button class="que_ding" @click="addContent1" v-show="que2">确定</button>
    </div>
    <!-- 向上的图标 -->
    <div class="top_tu" v-show="top" @click="shang">
      <span></span>
    </div>
    <!-- <Xiangqing></Xiangqing> -->
  </div>
</template>
<script>
//3： 实现开关  避免用户多点 让定时器混乱
// 通过开关实现 只能出现一个轮播定时器
window.onload = function () {};
</script>

<script>
// 暴露
// import Xiangqing from '@/components/Xiangqing.vue';
import bus from "@/bus.js";
import $ from "jquery";
export default {
  // name: "Xiangqing",
  // components: {Xiangqing},
  data() {
    return {
      msg: true, //详情
      msg1: false, //评价
      f1: true, //上浮购买物品
      flag0: 0, //字体的变色
      show: false,
      title: "￥1000",
      xing: "星币可抵扣5元",
      xing_ing: "", //图片路径
      shuLiang: 1, //购买的数量
      yanse: false, //收藏的颜色
      fen_title: "", //标题
      h_jia: "", //活动价格
      xq_tu: "", //详情图片
      queding: true, //确定开关
      kuanS1: "款式一",
      kuanS2: "款式二",
      kuanS3: "款式三",
      kuanShi: "", //接收款式
      isChecked: false,
      flag: 0, //款式字体的颜色和样式
      op: true,
      op1: true, //款式选择
      zhi: true, //全选按钮
      top: false, //置顶的图标
      que2: false, //加入购物车
      lunBo: [
        {
          lunImg: "./img/xluna.jpg",
        },
        {
          lunImg: "./img/xlunb.jpg",
        },
        {
          lunImg: "./img/6.jpg",
        },
        {
          lunImg: "./img/xluna.jpg",
        },
        {
          lunImg: "./img/xlunb.jpg",
        },
      ],
      SHOP: [],
    };
  },
  mounted() {
    //拿到 装着图片的ul
    var img = document.getElementById("img");
    //获取所有的lis
    var lis = document.querySelectorAll("#img li");
    //获取左右按钮
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var btns = document.querySelectorAll("#pageNav > a");
    //获取banner
    var banner = document.getElementById("banner");
    var pageNav = document.getElementById("pageNav"); // 圆点父元素
    var timer = null; //  定时器 用来累加left 实现滚动效果
    var start = -100; // 默认的left值
    var flag = true; //开关 防止多点
    var index = 1; // 默认a 圆点红点下标
    //初始化    有可能轮播图片的个数会变化
    img.style.left = start + "%"; // 默认显示第一张图 -100%
    //默认 第一个a圆点 红色
    btns[0].className = "red";
    //li 的宽度 =  100%/li的个数
    for (var i = 0; i < lis.length; i++) {
      lis[i].style.width = 100 / lis.length + "%";
    }
    //ul的宽度 = li的个数*100
    img.style.width = lis.length * 100 + "%";

    //周期函数
    function move(num) {
      //  3 一旦移动了 关闭 开关
      flag = false;
      // 4. 一旦进入移动  则去掉过度效果
      img.style.transition = "";
      // 获取left值
      var left = parseInt(img.style.left); // 拿到的字符串 转为数
      //声明一个 速度 让图片的left值慢慢的变化 -100%->-200%
      var speed = num / 10; //移动的速度
      //临界值  不再累加left 不再滑动
      var moveLeft = left + num;

      // 慢慢的累加left 实现 过度的效果
      var play = function () {
        //什么情况下才累加
        if (left == moveLeft) {
          //不能再加了 到头了
          //  如果到达了- -500=>-100
          if (left <= start * (lis.length - 1)) {
            left = start; // left= -100
            img.style.left = left + "%";
          }
          //限制条件2  left==0时 立马变 -400(在4张轮播图情况下)
          if (left == 0) {
            left = start * (lis.length - 2); // left= -400
            img.style.left = left + "%";
          }

          //停止定时器了
          clearTimeout(timer);
          // 3 里面的慢慢的滚动效果的定时器结束 开关开起来
          flag = true;
        } else {
          left += speed;
          img.style.left = left + "%";
          timer = setTimeout(play, 50);
        }
      };
      play();
    }
    function go() {
      //跑起来
      move(start);

      //4 点击右键 实现 圆点的变化
      index++; //每点击一次  下标 index++
      if (index > lis.length - 2) {
        //如果到达临界点 则复位
        index = 1;
      }
      btnShow(index); //调用index方法
    }
    //启动定时器
    var outTimer = setInterval(go, 2000);

    // 2 鼠标移入
    banner.addEventListener("mouseenter", function () {
      clearInterval(outTimer); //清除外围的 定时器
      outTimer = null;
    });
    // 2 鼠标移出   重新赋值启动定时器
    banner.addEventListener("mouseleave", function () {
      outTimer = setInterval(go, 2000);
    });
    //4. 给小圆点  添加 点击 实现 跳转对应的图片的功能
    pageNav.addEventListener("click", function (e) {
      //
      e.preventDefault(); //阻止a的默认跳转
      e.stopPropagation(); //阻止冒泡
      //  必须点到a才执行  点击的节点名 A 则执行
      if (e.target.nodeName == "A") {
        //获取点击的a 的  title属性
        var x = e.target.title;
        console.log(x);
        // 设置 ul的left定位
        img.style.left = x * start + "%";
        //点击a时  添加 过度效果  慢慢的滚动过去
        img.style.transition = "all linear 500ms";
        //把x的值赋值给index
        index = x;
        //鼠标点击圆点 变红则调用 btnShow()
        btnShow(index);
      }
    });
    // 让a圆点 变红显示
    function btnShow(index) {
      //遍历让所有的a圆点 先去掉
      for (var i = 0; i < btns.length; i++) {
        btns[i].className = "";
      }
      index = index - 1; //下标从0开始  index从1开始
      btns[index].className = "red";
    }

    /*  */
    window.addEventListener("scroll", this.handleScroll, true);
    window.scrollTo(0, 0);
    // bus.$off('myHeader');
    bus.$on("myHeader", (data) => {
      this.lunBo[2].lunImg = data.src;
      this.xing_ing = data.src;
      this.fen_title = data.title;
      this.h_jia = data.money;
      this.xq_tu = data.src;
    });
  },
  methods: {
    btn() {
      // alert(1);
      if (!this.msg) {
        this.msg = !this.msg;
        this.msg1 = false;
      }
    },
    btn1() {
      // alert(1);
      if (!this.msg1) {
        this.msg1 = !this.msg1;
        this.msg = false;
      }
    },
    gou() {
      this.f1 = !this.f1;
      this.que2 = false;
    },
    gou1() {
      this.que2 = true;
      this.f1 = !this.f1;
    },
    // 改变颜色
    yan() {
      var aas = document.querySelectorAll(".bao a");
      // console.log(aas);
      for (var i = 0; i < aas.length; i++) {}
    },
    shang() {
      // 置顶
      $("html").animate(
        {
          scrollTop: 0,
        },
        300,
        "linear"
      );
    },
    //  管理显示隐藏
    handleScroll() {
      var top = Math.floor(
        document.body.scrollTop ||
          document.documentElement.scrollTop ||
          window.pageYOffset
      );
      top < 630
        ? (this.flag0 = 0)
        : top < 700
        ? (this.flag0 = 1)
        : top < 750
        ? (this.flag0 = 2)
        : (this.flag0 = 3);

      if (top >= 30) {
        this.top = true;
        this.show = true;
      } else {
        this.show = false;
        this.top = false;
      }
    },
    // 款式
    kuan1() {
      this.title = "￥1000";
      this.xing = "星币可抵扣5元";
      this.xing_ing = this.lunBo[2].lunImg;
      this.kuanShi = this.kuanS1;
      this.flag = 0;
    },
    kuan2() {
      this.title = "￥348";
      this.xing = "星币可抵扣2元";
      this.xing_ing = this.lunBo[0].lunImg;
      this.kuanShi = this.kuanS2;
      this.flag = 1;
    },
    kuan3() {
      this.title = "￥666";
      this.xing = "星币可抵扣6元";
      this.xing_ing = this.lunBo[1].lunImg;
      this.kuanShi = this.kuanS3;
      this.flag = 2;
    },
    sub() {
      if (this.shuLiang > 1) {
        this.shuLiang--;
      }
    },
    add() {
      if (this.shuLiang >= 0) {
        this.shuLiang++;
      }
    },
    // 添加数据
    addContent() {
      if (this.flag == 3) {
        // 购买提示显示
        this.op1 = false;
        var that = this;
        setTimeout(function () {
          that.op1 = true;
        }, 500);
      } else {
        // 购买提示显示
        this.op = false;
        var that = this;
        setTimeout(function () {
          that.op = true;
          // 下拉隐藏
          that.f1 = true;
        }, 1000);
        setTimeout(function () {
          // 下拉隐藏
          that.f1 = true;
        }, 200);
        var contents = {
          shopSrc: this.xing_ing,
          shopMoney: this.title,
          shopCount: this.shuLiang,
          addKuan: this.kuanShi,
          shopFont: this.fen_title,
          shopTotal: Number(this.title.slice(1)),
          isChecked: this.isChecked,
          zhi: this.zhi,
        };
        //调用store中的mutations将商品加入购物车
        this.$store.commit("aContents", contents);

        // console.log(contents);
        /* var flag = false; //第一次直接添加
        this.SHOP.some((item) => {
          //some:不创建新数组、不改变原数组、判断为true则马上return true
          //every:不创建新数组、不改变原数组、判断为false则马上return false
          if (item.shopSrc == contents.shopSrc) {
            console.log(contents.shopCount);
            console.log(item.shopCount);
            item.shopCount += contents.shopCount;
            flag = true;
            return true; //结束
          }
        });
        // state.SHOP=arr;
        if (!flag) {
          this.SHOP.push(contents);
        } */

        localStorage.setItem("shop", JSON.stringify(this.$store.state.SHOP));
        /* if(localStorage.getItem('shop') != null){
           this.$store.state.SHOP = JSON.parse(localStorage.getItem('shop'));
        } */
      }
    },
    addContent1() {
      if (this.flag == 3) {
        // 购买提示显示
        this.op1 = false;
        var that = this;
        setTimeout(function () {
          that.op1 = true;
        }, 500);
      } else {
        var contents = {
          shopSrc: this.xing_ing,
          shopMoney: this.title,
          shopCount: this.shuLiang,
          addKuan: this.kuanShi,
          shopFont: this.fen_title,
          shopTotal: Number(this.title.slice(1)),
          isChecked: this.isChecked,
          shopYou: 5,
          shopYun: 4,
          isChecked: true,
        };
        //调用store中的mutations将商品加入购物车
        this.$store.commit("aaContents", contents);
        // window.location.href = "http://localhost:8080/#/Dingdan";
        this.$router.push("/Dingdan");
      }
    },
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
div {
  box-sizing: border-box;
}
#banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 50px;
}

#banner ul {
  position: relative;
  list-style: none;
  /*默认 轮播图是4张 */
  width: 600%;
  overflow: hidden;
}

#banner ul li {
  /*width: 16.6667% ;*/
  float: left;
}

#banner ul li img {
  display: block;
  width: 100%;
}

/*小圆点*/
#pageNav {
  position: absolute;
  bottom: 20px;
  right: 50%;
  transform: translate(50%);
}

#pageNav a {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 3px;
}

#pageNav a.red {
  background-color: #ff1e42;
}
.shang {
  header {
    width: 100%;
    height: 1.332623rem;
    background-color: #fff;
    text-align: center;
    font-size: 0.479744rem;
    font-weight: 600;
    line-height: 1.332623rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
  }
  //
  .bao {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // line-height: 50px;
    font-size: 14px;
    color: #262623;
    // 点击改变颜色
    .bei {
      color: #b2863f;
      padding-bottom: 10px;
      border-bottom: 2px solid #b2863f;
    }
  }
  .jian {
    width: 0.399787rem;
    height: 0.399787rem;
    display: inline-block;
    border-top: 1px solid #565656;
    border-left: 1px solid #565656;
    transform: rotate(-45deg) translate(-82px, -79px);
  }
  .gou_tb {
    float: right;
    font-size: 20px;
    margin-right: 10px;
  }
  // 价格
  nav {
    overflow: hidden;
    margin-top: 10px;
    padding: 0px 15px 5px;
    width: 100%;
    // height: 248px;
    line-height: 50px;
    font-size: 16px;
    background-color: #fff;
    // border-radius: 20px;
    .qian {
      .huo {
        color: #be985b;
      }
      .h_jia {
        color: #be985b;
        font-weight: 500;
        font-size: 20px;
      }
      .y_jia {
        font-size: 14px;
        color: #adadad;
        text-decoration: line-through;
      }
    }
    // 文字
    .wen {
      height: 50px;
      line-height: 23px;
      margin-bottom: 100px;
      div {
        // position: relative;
        span {
          font-weight: bolder;
          color: #353535;
        }
        .fen {
          width: 70%;
          float: left;
        }
        .xiang {
          float: right;
          width: 86px;
          line-height: 28px;
          background: #f3f3f3;
          height: 28px;
          transform: translate(36px, 8px);
          border-radius: 20px;

          i {
            color: #a0a0a1;
            font-size: 16px;
            margin: 5px;
            font-weight: 400;
          }
          span {
            color: #a2a2a2;
            font-weight: 500;
            font-size: 15px;
          }
        }
      }

      .xin {
        color: #be985b;
        font-size: 14px;
        font-weight: 100;
      }
    }
    // 活动
    .huo_dong {
      height: 35px;
      line-height: 35px;
      color: #adadad;
      margin-top: 70px;
      border-top: 1px solid;
      border-bottom: 1px solid;
      .xin {
        color: #b2863f;
      }
      .ling {
        color: #adadad;
        margin-left: 127px;
      }
      .ling::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-top: 1px solid #adadad;
        border-right: 1px solid #adadad;
        transform: rotate(45deg);
      }
    }
    // 选商品
    .xuan {
      height: 35px;
      line-height: 35px;
      color: #adadad;
      .jian_tou {
        margin-left: 231px;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-top: 1px solid #adadad;
        border-right: 1px solid #adadad;
        transform: rotate(45deg);
      }
    }
  } //nav

  // 交易
  .jiao_yi {
    margin-top: 15px;
    height: 50px;
    line-height: 50px;
    color: #adadad;
    background-color: #fff;
    font-size: 16px;
    padding: 0 15px;
    .goumai {
      color: #b2863f;
      margin-right: 8px;
    }
    .liulan,
    .goumai {
      float: right;
    }
  }

  // 提示信息
  .ti {
    height: 50px;
    margin-top: 15px;
    line-height: 50px;
    font-size: 16px;
    color: #adadad;
    text-align: center;
  }
  .ti::before {
    content: "";
    width: 50px;
    border-top: 1px solid #adadad;
    display: inline-block;
    transform: translate(-10px, -4px);
  }
  .ti::after {
    content: "";
    width: 50px;
    border-top: 1px solid #adadad;
    display: inline-block;
    transform: translate(10px, -4px);
  }

  // 信息详情
  main {
    font-size: 16px;
    color: #afafaf;
    background: #fff;
    width: 100%;
    height: 500px;
    img {
      width: 100%;
    }
    .two_btn {
      display: flex;
      justify-content: space-around;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid;
      width: 93%;
      margin: 5px auto;
      div {
        width: 40px;
        text-align: center;
      }
      .xq {
        border-bottom: 1px solid #af8136;
        color: #af8136;
      }
    }

    // 评论
    .ping_len {
      padding: 15px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      button {
        font-size: 16px;
        color: #fff;
        padding: 5px 14px;
        border-radius: 9px;
        margin-bottom: 10px;
      }
      .ping {
        background: #f2f2f2;
        color: #353535;
        outline: none;
        border: transparent;
      }
    }
  } //main

  /* 底部信息 */
  footer {
    width: 100%;
    height: 150px;
    margin-top: 1.332623rem;
    background-color: #efeff4;
    div {
      width: 80%;
      margin: auto;
      text-align: center;
      line-height: 2.665245rem;
      font-size: 16px;
      color: #b7b7b9;
      position: relative;
      span {
        display: inline-block;
        background-color: #efeff4;
        position: relative;
        z-index: 2;
        width: 85px;
      }
      .xian {
        width: 100%;
        border-top: 1px solid #d3d3d4;
        position: absolute;
        top: 50%;
        margin: auto;
      } //footer
    }
  } //footer

  // 底部购买功能
  .dibu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #fff;
    z-index: 2;
    .left {
      display: flex;
      justify-content: space-around;
      width: 141px;
      line-height: 50px;
      float: left;
      div {
        display: flex;
        flex-flow: column;
        align-items: center;
        p {
          color: #6c7178;
          color: #6c7178;
          height: 15px;
          display: inline-block;
          margin-top: -7px;
          font-size: 13px;
        }
        .tu {
          font-size: 35px;
        }
        .tu2 {
          font-size: 28px;
        }
        .tu3 {
          font-size: 25px;
        }
        .dianpu {
          margin-top: 6px;
        }
      }
      .yanse {
        p {
          color: #b2863f;
        }
      }
    }
    .right {
      display: flex;
      justify-content: space-around;
      // width: 70%;
      font-size: 16px;
      line-height: 50px;
      div {
        color: #fff;
        background-color: red;
        height: 40px;
        margin-top: 5px;
        line-height: 40px;
        padding: 0 20px;
      }
      .jia {
        background: linear-gradient(to right, #e4b25d, #c4903b);
        border-radius: 20px 0px 0 20px;
      }
      .gou_mai {
        background: linear-gradient(to right, #d8aa54, #b4802c);
        margin-right: 10px;
        border-radius: 0px 20px 20px 0px;
      }
    }
  } //dibu
  // 遮罩层
  .zhe {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 21;
  }
  // 购买的商品
  .gmsp {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    background-color: #fff;
    z-index: 22;
    transform: translateY(0px);
    transition: all 0.3s linear;
    // 532px
    padding: 15px;
  }
  .la {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    background-color: #fff;
    padding: 10px;
    z-index: 22;
    transform: translateY(532px);
    transition: all 0.3s linear;
  }

  // 头部加图片
  .gou_top {
    width: 100%;
    height: 115px;

    .tu {
      width: 100px;
      height: 100px;
      margin-right: 20px;
      img {
        width: 100px;
        height: 100px;
      }
      float: left;
    }
    // 文字
    .wen {
      margin: 20px 0;
      color: #be985b;
      .title {
        font-weight: 500;
        font-size: 25px;
      }
      .xing {
        font-size: 14px;
      }
      float: left;
    }
    // X
    .ca {
      border-radius: 50%;
      width: 20px;
      height: 20px;
      border: 1px solid #191919;
      text-align: center;
      line-height: 20px;
      float: right;
      font-weight: 500;
    }
  } //gou_top

  // 选择款式
  .kuan {
    border-top: 1px solid #f4f4f4;
    p {
      font-size: 16px;
      margin: 10px 0;
      // kc
      .hui {
        font-size: 13px;
        margin-left: 10px;
        color: #b4b4b4;
      }
    }
    div {
      margin: 10px 0;
      height: 50px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      button {
        background-color: #f5f5f5;
        padding: 5px 10px;
        outline: none;
        border: transparent;
        font-size: 14px;
        border-radius: 5px;
      }
      .kuan_yanse {
        color: #fff;
        background: linear-gradient(to bottom, #ecc073, #c4a26d);
      }
    }
    .left {
      float: left;
    }
    .btn {
      button {
        background-color: #f5f5f5;
        padding: 5px 10px;
        outline: none;
        border: transparent;
        font-size: 17px;
        font-weight: 600;
        padding: 2px 11px;
      }
      float: right;
      .shu {
        margin: 0 2px;
        width: 37px;
      }
    }
  }
  // 确定按钮
  .que_ding {
    position: absolute;
    bottom: 0;
    left: 0;
    // right: 0;
    width: 90%;
    height: 45px;
    border-radius: 30px;
    outline: none;
    border: transparent;
    background: linear-gradient(to bottom, #e4b25d, #c4903b);
    color: #fff;
    font-size: 17px;
    margin: 0 19px;
  }
  // 提示信息
  #ti {
    position: fixed;
    width: 170px;
    height: 80px;
    bottom: 50%;
    left: 50%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.7);
    transform: translate(-50%);
    line-height: 46px;
    font-size: 13px;
    text-align: center;
    border-radius: 5px;
    // opacity: 0;
    transition: all 0.3s linear;
    p {
      color: #fff;
    }
    .dui_hao {
      width: 15px;
      height: 25px;
      border-bottom: 2px solid #ec4c03;
      border-right: 2px solid #ec4c03;
      margin: 10px auto;
      transform: rotate(45deg);
    }
    .wenti {
      width: 15px;
      height: 25px;
      margin: 0px auto;
      font-size: 25px;
      color: #ec4c03;
    }
  }
  .op {
    opacity: 0;
    transition: all 0.5s linear;
  }
  // 置顶图标
  .top_tu {
    width: 1.066098rem;
    height: 1.066098rem;
    border: 0.026652rem solid transparent;
    position: fixed;
    bottom: 70px;
    right: 15px;
    border-radius: 20px;
    background: rgba(151, 113, 37, 0.2);
    text-align: center;
    /* line-height: 15px; */
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-left: 2px solid #977125;
      border-top: 2px solid #977125;
      transform: rotate(45deg);
      margin-top: 6px;
    }
  }
} //shang
</style>